<template>
  <view class="container">
    <!-- 用户名 -->
    <text class="username">用户名ABC</text>

    <!-- 菜单列表 -->
    <view class="menu">
      <uni-card 
        v-for="(item, index) in menuItems" 
        :key="index"
        :is-shadow="true" 
        class="menu-item"
        @click="handleMenuItemClick(item)"
      >
        <view class="menu-content">
          <text class="menu-text">{{ item.name }}</text>
          <uni-icons type="right" size="24" color="#999" />
        </view>
      </uni-card>
    </view>
  </view>
</template>
<script>
import { reactive } from 'vue'

export default {
  setup() {
    const menuItems = reactive([
      { name: '设备与家庭成员', path: '/pages/DeviceAndFamily/DeviceAndFamily' }, // 示例路径
      { name: '账号管理', path: '/pages/AccountManagement/AccountManagement' }, // 目标页面路径
      { name: '帮助与反馈', path: '/pages/HelpAndFeedback/HelpAndFeedback' }, // 示例路径
    ])

    // 处理菜单项点击事件
    const handleMenuItemClick = (item) => {
      if (item.path) {
        uni.navigateTo({
          url: item.path, // 跳转到对应页面
        })
      }
    }

    return {
      menuItems,
      handleMenuItemClick,
    }
  }
}
</script>
<style lang="scss" scoped>
$padding: 20rpx;
$background-color: #f8f8f8;
$text-color: #333;
$secondary-text-color: #666;
$card-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

.container {
  padding: $padding;
  background-color: $background-color;
  min-height: 100vh;
}

.username {
  margin: 60rpx 0 140rpx 60rpx;
  font-size: 60rpx;
  color: $text-color;
  font-weight: bold;
  margin-bottom: 40rpx;
  display: block;
}

.menu-item {
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: $card-shadow;
}

.menu-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 16rpx;
}

.menu-text {
  font-size: 28rpx;
  color: $text-color;
}
</style>